<template>
  <!-- 收货地址 -->
  <van-contact-card type="edit" v-if="address" :name="`${address.consignee} ${address.region_text}`" :tel="address.mobile" :editable="false" />

  <!-- 商品卡片 -->
  <van-card
    v-for="(item, key) in product"
    :title="item.products.name"
    :thumb="item.products.thumbs_text"
    :num="item.pronum"
  >
    <template #title>
      <div class="title">{{item.products.name}}</div>
    </template>

    <!-- 卡片的插槽部分 -->
    <template #desc v-if="item.attrs">
      <van-tag v-for="(attr, index) in item.attrs" :key="index" class="tag" type="primary">{{attr.value}}</van-tag>
    </template>
    <template #desc v-else>
      <van-tag class="tag" type="danger">无规格数据</van-tag>
    </template>

    <template #tags>
      <div class="price">单价：￥{{item.price}}</div>
    </template>

    <template #price>
      <div class="price">合计：￥{{item.total}}</div>
    </template>
  </van-card>

  <!-- 订单信息 -->
  <van-cell title="订单号" value-class="right" :value="order.code" />
  <van-cell title="订单总价" :value='`￥${order.amount}`' />
  <van-cell title="支付方式" :value="order.pay_text" />
  <van-cell title="订单状态" :value="order.status_text" />
  <van-cell title="优惠金额" :value="order.coupon_amount" />
  <van-cell title="下单时间" :value="order.createtime_text" />
  <van-cell title="订单描述" :value="order.remark" />

  <!-- 操作按钮组 -->
  <div class="actions">
    <van-button square hairline type="primary" size="large">在线客服</van-button>
    <van-button square hairline type="danger" size="large">申请退款</van-button>
  </div>
</template>

<script setup>
  const {proxy} = getCurrentInstance()

  let orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0
  let address = ref(null)
  let product = ref([])
  let order = ref({})
  
  onMounted(() => {
    OrderInfo()
  })
  const OrderInfo = async () => {
    var params = {
      orderid,
      busid: proxy.$business.value.id
    }

    var result = await proxy.$POST({
      url: 'order/info',
      params
    })

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }

    address.value = result.data.address
    order.value = result.data.order

    if(result.data.product)
    {
      result.data.product.map(item => item.attrs = JSON.parse(item.attrs))
    }

    product.value = result.data.product
  }

</script>

<style scoped>
  @import url('/assets/css/OrderInfo.css');
  ::v-deep .right {
    flex-grow: 2;
    font-size: 15px;
  }
</style>